<template>
    <div class="store-detail full">
        <div class="store-img">
            <img src="../../assets/img/10.png" alt=""/>
        </div>
        <div class="store-name">大龙燚火锅（九眼桥店）</div>
        <div class="store-introduce">简介：大龙燚成立于2013年，总部位于成都。经营地道四川老火锅的大型全国性餐饮企业，全称为成都大龙燚餐饮管理有限公司。大龙燚火锅2014年开放全国加 盟，已在成都、上海、深圳、丽江、西安、哈尔滨、绵 阳等城市已开业20余家连锁餐厅。</div>
        <div class="address-phone">
            <div class="address-phone-info">
                <div><span>电话：</span><span>028-86677525</span></div>
                <div><span>地址：</span><span>锦江区宏济新路330号（天香仁和酒楼旁）</span></div>
            </div>
            <div class="navigate">导航</div>
        </div>
        <div class="exchange-button">
            <div @click="showModal">兑换</div>
        </div>
        <div class="bottom-space"></div>
        <div class="modal" v-show="modalToggle">
            <div class="modal-pos">
                <div class="modal-box">
                    <div class="modal-store-name">商家：大龙燚火锅（九眼桥店）</div>
                    <div class="exchange-number">
                        <div>兑换额</div>
                        <div class="select-price">
                            <div class="select-price-txt" @click="select">{{selected.price}}</div>
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" @click="select">
                                <polygon points="10 0,5 10,15 10" fill="#999999"  stroke="#999999" stroke-width="1" />
                            </svg>
                            <div class="select-list" v-show="exchangePriceToggle">
                                <div v-for="i in selectData" :key="i.id" :class="[selected.id === i.id && 'selected-item']" @click="selectAction(i)">{{i.price}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-button">
                        <div @click="exchange">确定兑换</div>
                        <div @click="cancel">取消</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "storeDetail",
        data () {
            return {
                exchangePriceToggle: false,
                modalToggle: false,
                selected: {
                    id: 2,
                    price: '30元'
                },
                selectData: [
                    {
                        id: 0,
                        price: '10元'
                    },
                    {
                        id: 1,
                        price: '20元'
                    },
                    {
                        id: 2,
                        price: '30元'
                    },
                    {
                        id: 3,
                        price: '40元'
                    },
                    {
                        id: 4,
                        price: '50元'
                    }
                ]
            }
        },
        methods: {
            select () {
                this.exchangePriceToggle = !this.exchangePriceToggle;
            },
            selectAction (i) {
                this.exchangePriceToggle = false;
                this.selected = i;
            },
            exchange () {
                this.modalToggle = false;
            },
            cancel () {
                this.modalToggle = false;
            },
            showModal () {
                this.modalToggle = true;
            }
        }
    }
</script>

<style scoped lang="scss">
    .store-detail {
        background-color: #F0F1F7;

        .store-img {
            background-color: #ffffff;
            width: 7.38rem;
            height: 3.74rem;
            margin: 0 auto;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .store-name {
            background-color: #ffffff;
            font-size: 0.3rem;
            font-weight: 500;
            color: rgba(3, 3, 3, 1);
            padding: 0.38rem 0 0.26rem 0.4rem;
        }

        .store-introduce {
            background-color: #ffffff;
            padding: 0 0.4rem;
            font-size: 0.28rem;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
        }

        .address-phone {
            background-color: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.2rem 0.4rem 0.6rem 0.4rem;

            .address-phone-info {
                width: 4.97rem;

                > div {
                    line-height: 0.5rem;

                    > span {
                        font-size: 0.28rem;
                        font-weight: 500;

                        &:first-child {
                            color: #333333;
                        }

                        &:nth-child(2) {
                            color: #999999;
                        }
                    }
                }
            }

            .navigate {
                width: 0.98rem;
                line-height: 0.44rem;
                background: rgba(255, 150, 38, 1);
                border: 0.01rem solid rgba(238, 238, 238, 1);
                border-radius: 0.22rem;
                font-size: 0.24rem;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                text-align: center;
            }
        }

        .exchange-button {
            padding: 1.8rem 0 0.87rem 0;
            background-color: #ffffff;
            margin-top: 0.2rem;

            > div {
                width: 6.3rem;
                line-height: 0.88rem;
                background: rgba(255, 150, 38, 1);
                border-radius: 0.1rem;
                font-size: 0.32rem;
                font-weight: bold;
                color: rgba(255, 255, 255, 1);
                text-align: center;
                margin: 0 auto;
            }
        }

        .bottom-space {
            height: 1.4rem;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.1);
            z-index: 6;

            .modal-pos {
                padding-top: 2.4rem;

                .modal-box {
                    width: 6rem;
                    height: 3.57rem;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 0.1rem;
                    margin: 0 auto;

                    .modal-store-name {
                        font-size: 0.3rem;
                        font-weight: 500;
                        text-align: center;
                        color: rgba(3, 3, 3, 1);
                        padding: 0.4rem 0;
                    }

                    .exchange-number {
                        width: 4rem;
                        margin: 0.1rem auto 0 auto;
                        display: flex;
                        align-items: center;
                        > div {
                            &:first-child {
                                font-size: 0.3rem;
                                font-weight: 500;
                                color: rgba(3, 3, 3, 1);
                                margin-right: 0.2rem;
                            }
                        }
                        .select-price{
                            width: 1.7rem;
                            height: 0.64rem;
                            background: rgba(245, 245, 245, 1);
                            border-radius: 0.04rem;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 0 0.2rem;
                            position: relative;
                            .select-list{
                                position: absolute;
                                background-color: #ffffff;
                                top: 0.64rem;
                                width: 100%;
                                left: 0;
                                padding-left: 0.2rem;
                                >div{
                                    line-height: 0.6rem;
                                    color: #999999;
                                }
                                .selected-item {
                                    color:rgba(255,142,21,1);
                                }
                            }
                            &-txt {
                                font-size:0.30rem;
                                font-weight:500;
                                color:rgba(255,142,21,1);
                                flex-grow: 1;
                            }
                            svg{
                                width: 0.4rem;
                                height: 0.2rem;
                                transform: rotate(180deg);
                            }
                        }
                    }
                    .modal-button{
                        display: flex;
                        justify-content: space-between;
                        margin: 0.4rem auto 0 auto;
                        width: 4rem;
                        text-align: center;
                        > div {
                            width:1.80rem;
                            line-height:0.68rem;
                            border-radius:0.04rem;
                            &:first-child{
                                background:rgba(255,150,38,1);
                                font-size:0.3rem;
                                font-weight:500;
                                color:rgba(255,255,255,1);
                            }
                            &:nth-child(2) {
                                background:rgba(243,243,243,1);
                                font-size:0.3rem;
                                font-weight:500;
                                color:rgba(204,204,204,1);
                            }
                        }
                    }
                }

            }
        }
    }
</style>